import React, { useEffect, useCallback, useState } from 'react';
import {
    Form,
    Select,
    Button,
    Upload,
    Input,
    message
} from 'antd';

import { InboxOutlined } from '@ant-design/icons';
import teacherApi from '../../../api/teacher/index';
import subjectApi from '../../../api/subject/index.js';
const { Option } = Select;
export default function AddTeacher() {
    const getSubject = useCallback(async (val) => {
        const { data } = await subjectApi.getSubjectList();
        console.log(data, 99999);
        setSubjectList([
            ...data
        ])
    }, [])
    const [teacherInfo, setTeacherInfo] = useState({
        career: '',
        education: '',
        isFamous: '',
        name: '',
        status: '',
        subjectId: 0,
        avatar: '',
        myInput: '',
    });
    useEffect(() => {
        console.log('5');
        getSubject();
    }, [getSubject]);
    const [subjectList, setSubjectList] = useState([]);
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
    };

    function normFile(e) {
        console.log('Upload event:', e);
        // const data=await teacherApi.uploadTeacherImgApi();

        if (Array.isArray(e)) {
            return e;
        }
        return e && e.fileList;
    };

    async function onFinish({ career, education, isFamous, name, status, subjectId }) {
        const data = await teacherApi.addTeacherApi({ career, education, isFamous, name, status, subjectId, avatar: '55.jpg' });
        console.log(data);
        if (data.code === 200) {
            message.success('添加成功');
        } else {
            message.error('添加失败');
        }
    };

    return (
        <div>
            <Form
                name="validate_other"
                {...formItemLayout}
                onFinish={onFinish}
                initialValues={{
                    'input-number': 3,
                    'checkbox-group': ['A', 'B'],
                    rate: 3.5,
                }}
            >
                <Form.Item >
                    <span className="ant-form-text">新增教师</span>
                </Form.Item>
                <Form.Item
                    name="subjectId"
                    label="擅长科目"
                    hasFeedback
                    rules={[{ required: true, message: '请选择擅长科目id！！！' }]}
                >
                    <Select placeholder="请选择科目" >
                        {
                            subjectList.map(item => {
                                return (
                                    <Option value={item.id} key={item.id}>{item.name}</Option>
                                )
                            })
                        }
                    </Select>
                </Form.Item>

                <Form.Item name='name' label='讲师名称' rules={[{ required: true, message: '请输入教师名称!!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name='education' label='教育经历' rules={[{ required: true, message: '请输入教育经历!!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name='career' label='工作经历' rules={[{ required: true, message: '请输入工作经历!!' }]}>
                    <Input />
                </Form.Item>
                <Form.Item name="isFamous" label="是否名师" rules={[{ required: true, message: '请选择是否名师!!' }]}>
                    <Select placeholder="请选择是否名师">
                        <Option value="y">是</Option>
                        <Option value="n">不是</Option>
                    </Select>
                </Form.Item>
                <Form.Item name="status" label="是否禁用" rules={[{ required: true, message: '请选择是否禁用' }]} >
                    <Select placeholder="请选择是否禁用">
                        <Option value="y">正常</Option>
                        <Option value="n">禁用</Option>
                    </Select>
                </Form.Item>

                <Form.Item label="Dragger">
                    <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
                        <Upload.Dragger name="avatar" >
                            <p className="ant-upload-drag-icon">
                                <InboxOutlined />
                            </p>
                            <p className="ant-upload-text">Click or drag file to this area to upload</p>
                            <p className="ant-upload-hint">Support for a single or bulk upload.</p>
                        </Upload.Dragger>
                    </Form.Item>
                </Form.Item>

                <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
                    <Button type="primary" htmlType="submit">
                        Submit
        </Button>
                </Form.Item>
            </Form>
        </div>
    )
}

